<template>
    <div class="center_div">
        <el-table :data="Department"  v-loading="tableLoading" element-loading-text="Loading">
            <el-table-column prop="departmentid" label="部门id" min-width="90"></el-table-column>
            <el-table-column prop="departmentname" label="部门" min-width="90"></el-table-column>
            <el-table-column label="操作" min-width="120" align="center">
                <el-tag type="info">请联系管理员操作</el-tag>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Department: [
                    {departmentid: '测试1',departmentname: '组织部'},
                    {departmentid: '测试2',departmentname: '体育部'},
                    {departmentid: '测试3',departmentname: '爱情部'},
                    {departmentid: '测试4',departmentname: '秘书部'},
                    {departmentid: '测试5',departmentname: '哈哈部'}
                ],
                depart: {},
                dialogVisible: false,
                dialogTitle: '',
                tableLoading: false
            }
        },
        created() {
            this.fetchDepart()
        },
        methods: {
            async fetchDepart(){
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/alldeps')
                if(code === 200) {
                    this.Department = data
                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            addNewDepart() {
                this.dialogTitle = '新增部门'
                this.depart = {}
                this.dialogVisible = true
            },
            editDepart(row) {
                this.dialogTitle = '更新部门'
                this.depart = row
                this.dialogVisible = true
            },
            delDepart(row) {
                this.depart = row
                this.$confirm('确认删除吗？','警告',{
                    confirmButtonText: '确 认',
                    cancelButtonText:'取 消',
                    type:'warning'
                }).then(()=>{
                    this.delDpartdata(row)
                })
            },
            async addDpartdata(){
                let {code ,data ,msg} = await this.$post('/admin/adddepartment',{
                    data: {departmentname: this.depart.departmentname}
                })
                if(code === 200) {
                    console.log(data)
                    this.$message({
                        message: '新增部门成功',
                        type: 'success'
                    })
                    this.fetchDepart()
                } else {
                    this.$message.error(msg)
                }
                this.dialogVisible = false
            },
            async updDpartdata(){
                let {code ,data ,msg} = await this.$post('/admin/updatedep',{
                    data: {name: this.depart.departmentname, id: this.depart.departmentid}
                })
                if(code === 200) {
                    console.log(data)
                    this.$message({
                        message: '更新部门成功',
                        type: 'success'
                    })
                    this.fetchDepart()
                }else {
                    this.$message.error(msg)
                }
                this.dialogVisible = false
            },
            async delDpartdata(row){
                let {code ,data ,msg} = await this.$post('/admin/department/del',{
                    data: {departmentname: row.departmentname, departmentid: row.departmentid}
                })
                if(code === 200) {
                    console.log(data)
                    this.$message({
                        message: '删除部门成功',
                        type: 'success'
                    })
                    this.fetchDepart()
                }else {
                    this.$message.error(msg)
                }
                this.dialogVisible = false
            }
        }

    }
</script>

<style>
    .center_div{
        width: 60%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>